<template>
  <el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>采购清单管理</span>
			<el-button style="float: right; padding: 3px 0" type="text" @click="showPurchasingListCreateForm=true">新增采购清单</el-button>
		</div>
		<el-table
			:data="purchasingListListData"
			style="width: 100%">
			<el-table-column label="采购清单ID">
				<template slot-scope="scope">
					<i class="el-icon-key"></i>
					<span style="margin-left: 10px">{{ scope.row.purchasingListId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="合同ID">
				<template slot-scope="scope">
					<i class="el-icon-tickets"></i>
					<span style="margin-left: 10px">{{ scope.row.contractId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="清单名">
				<template slot-scope="scope">
					<i class="el-icon-star-on"></i>
					<span style="margin-left: 10px">{{ scope.row.purchasingListName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="是否已付款">
				<template slot-scope="scope">
					<span style="margin-left: 10px">
						<el-tag type="info" v-if="scope.row.paid == 0">未付款</el-tag>
						<el-tag type="success" v-if="scope.row.paid == 1">已付款</el-tag>
						</span>
				</template>
			</el-table-column>
			<el-table-column label="是否已执行">
				<template slot-scope="scope">
					<span style="margin-left: 10px">
						<el-tag type="info" v-if="scope.row.executed == 0">未执行</el-tag>
						<el-tag type="success" v-if="scope.row.executed == 1">已执行</el-tag>
						</span>
				</template>
			</el-table-column>
			<el-table-column label="总金额">
				<template slot-scope="scope">
					<i class="el-icon-star-off"></i>
					<span style="margin-left: 10px">{{ scope.row.purchasingListTotalCost }}元</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
				<el-dropdown>
						<el-button type="primary" size="mini">
							更多操作<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<span @click="getpurchasingListInfo(scope.$index, scope.row)">
									<i class="el-icon-info"></i>修改
								</span>
							</el-dropdown-item>
							<el-dropdown-item>
								<span @click="openAddGoodsIntoPurchasingListDrawer(scope.$index, scope.row)" v-if="scope.row.paid == 0">
									<i class="el-icon-circle-plus-outline"></i>添加商品
								</span>
							</el-dropdown-item>
							<el-dropdown-item>
								<span @click="handleDelete(scope.$index, scope.row)">
									<i class="el-icon-warning" style="color: red"></i>删除
								</span>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			layout="prev, pager, next"
			style="padding-top: 15px; text-align: center"
			:page-size="7"
			@current-change="handleCurrentChange"
			:total="purchasingListNumber">
		</el-pagination>
		<!-- 采购清单修改抽屉 -->
		<el-drawer
			size="70vw"
			:before-close="beforeUpdateFormClose"
			:visible.sync="showPurchasingListInfoForm"
			direction="rtl">
			<purchasingList-update-form :purchasingListUpdateData="purchasingListInfo" :goodsList="goodsList"/>
		</el-drawer>
		<!-- 采购清单创建抽屉 -->
		<el-drawer
			size="50vh"
			:before-close="beforeCreateFormClose"
			:visible.sync="showPurchasingListCreateForm"
			direction="btt">
			<purchasingList-create-form :contractList="contractList"/>
		</el-drawer>
		<!-- 添加商品给采购清单抽屉 -->
		<el-drawer
			size="40vh"
			:visible.sync="showAddGoodsIntoPurchasingListDrawer"
			:before-close="beforeAddGoodsFormClose"
			direction="ttb">
			<PurchasingListAddGoodsForm :purchasingList="purchasingList"/>
		</el-drawer> 
	</el-card>
</template>

<script>
import { purchasingListList,purchasingListSearch,contractAll,purchasingListDelete } from '@/api/sale'
import { goodsAll } from '@/api/common'
import PurchasingListCreateForm from './Drawer/PurchasingListCreateForm.vue'
import PurchasingListUpdateForm from './Drawer/PurchasingListUpdateForm.vue'
import PurchasingListAddGoodsForm from './Drawer/PurchasingListAddGoodsForm'
	export default {
		name: 'PurchasingList',
		data() {
			return {
				//总记录数
				purchasingListNumber: 0,
				// 获取采购清单列表分页参数
				purchasingListListParam:{
					startIndex: 0,
					pageSize: 7
				},
				// 采购清单列表
				purchasingListListData: [],
				// 显示采购清单创建抽屉
				showPurchasingListCreateForm: false,
				// 显示采购清单修改抽屉
				showPurchasingListInfoForm: false,
				// 采购清单信息
				purchasingListInfo: {},
				// 所有商品
				goodsList: [],
				// 合同列表
				contractList: [],
				// 添加商品给采购清单
				showAddGoodsIntoPurchasingListDrawer: false,
				// 采购清单
				purchasingList: {}
			}
		},
		props: [],
		components: {
			PurchasingListCreateForm,
			PurchasingListUpdateForm,
			PurchasingListAddGoodsForm
		},
		methods:{
			// 采购清单删除
			handleDelete(index, row){
				purchasingListDelete({purchasingListId: row.purchasingListId}).then(res => {
					this.getPurchasingListList()
				})
			},
			// 改变页码
			handleCurrentChange(val) {
				this.purchasingListListParam.startIndex = val - 1
				this.getPurchasingListList()
			},
			// 获取采购清单列表
			getPurchasingListList(){
				purchasingListList(this.purchasingListListParam).then(res => {
					console.log(res.data);
					this.purchasingListListData = res.data.purchasingList
					console.log(this.purchasingListListData);
					this.purchasingListNumber = res.data.total
				})
			},
			// 修改采购清单抽屉关闭前
			beforeUpdateFormClose(){
				this.getPurchasingListList()
				this.showPurchasingListInfoForm = false
			},
			// 创建采购清单抽屉关闭前
			beforeCreateFormClose(){
				this.getPurchasingListList()
				this.showPurchasingListCreateForm = false
			},
			// 获取采购清单信息
			getpurchasingListInfo(index, row){
				purchasingListSearch({purchasingListId: row.purchasingListId}).then(res => {
					this.purchasingListInfo = res.data.purchasingList	
					this.showPurchasingListInfoForm = true
				})
			},
			// 获取商品列表
			getGoodsList(){
				goodsAll().then(res => {
					this.goodsList = res.data.goodsList
				})
			},
			// 获取所有合同
			getAllContract(){
				contractAll().then(res => {
					this.contractList = res.data.contractList
				})
			},
			// 采购清单添加商品
			openAddGoodsIntoPurchasingListDrawer(index, row){
				this.showAddGoodsIntoPurchasingListDrawer = true
				this.purchasingList = row
			},
			// 添加商品抽屉关闭前
			beforeAddGoodsFormClose(){
				this.getPurchasingListList()
				this.showAddGoodsIntoPurchasingListDrawer = false
			}
		},
		computed:{
				//计算属性
		},
		watch:{
				//监听属性
		},
		created() {
			this.getPurchasingListList()
			this.getGoodsList()
			this.getAllContract()
		}
	}
</script>

<style scoped>
	.box-card{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>